<template>
  <!-- total -->
  <div class="information" v-if="datas">
    <div v-for="(item, i) in numberData" :key="i" class="information-item">
      <img class="imgb" :src="item.img" alt="" />
      <div class="content">
        <div class="content-left">
          <span> {{ item.title }}</span>
          <span class="num" :style="`color:${item.color};`">{{ datas[item.value] }}</span>
        </div>
        <div class="content-right">
          <img :src="item.i" alt="" />
          <!-- <svg-icon :name="item.icon" size="74px"></svg-icon>
          <svg-icon :name="item.shadow" class="shadow"></svg-icon> -->
        </div>
      </div>
    </div>
  </div>

  <a-card>
    <div class="order between" v-if="datas">
      <div class="" style="text-align: center" v-for="item in cards" :key="item">
        <img :src="item.icon" alt="" />
        <div class="right">
          <div class="num">{{ datas[item.num] }}</div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </a-card>

  <div class="footer fl">
    <div class="left_part fl">
      <a-card class="cl">
        <h2>
          <container-outlined />
          销量TOP10
        </h2>
        <div class="ul">
          <div class="li between" v-for="(item, index) in adminServiceList" :key="index">
            <div class="title-icon">
              <span class="icon flex">{{ index + 1 }}</span>
            </div>
            <div class="title">
              {{ item.serviceName }}
            </div>
            <div class="desc">{{ item.count }}单</div>
          </div>
        </div>
      </a-card>
      <a-card class="cards cl">
        <h2>
          <container-outlined />
          待办任务
        </h2>
        <div class="ul" v-if="datas">
          <div class="li between" v-for="(item, index) in todoList" :key="index">
            <div class="title-icon">
              <span class="icon flex">{{ index + 1 }}</span>
            </div>
            <div class="title">
              {{ item.name }}
            </div>
            <div class="desc">{{ item.value }}单</div>
          </div>
        </div>
      </a-card>
    </div>

    <!-- <div class="right_part">
      <a-card title="订单趋势">
        <a-select ref="select" v-model:value="form.timeType" @focus="focus" @change="handleChange">
          <a-select-option v-for="item in options1" :value="item.id" :key="item.id">{{ item.name }}</a-select-option>
        </a-select>
        <div class="char_wrap">
          <VueChart :options="options" />
        </div>
      </a-card>
    </div> -->
  </div>
</template>
<script>
import moment from 'moment'
import { onMounted, reactive, ref, provide, toRefs, computed } from 'vue'
import orderStatusEcharts from '@/components/index/allOrderStatus.vue'
import writeReport from '@/components/index/writeReport.vue'
import monthOrder from '@/components/index/monthOrder'
import serviceSort from '@/components/index/serviceSort'
import SvgIcon from '@/components/common/SvgIcon'
import * as echarts from 'echarts'
// require("echarts/theme/chalk");
import { home } from '@/api/index'
import applyBG from '@/assets/img/home/apply-bg.png'
import industryBG from '@/assets/img/home/industry-bg.png'
import userBG from '@/assets/img/home/user-bg.png'
import templateBG from '@/assets/img/home/template-bg.png'
import activeBG from '@/assets/img/home/active-bg.png'
import a from '@/assets/img/home/1.png'
import b from '@/assets/img/home/2.png'
import c from '@/assets/img/home/3.png'
import d from '@/assets/img/home/4.png'
import { ContainerOutlined } from '@ant-design/icons-vue'
const options1 = [
  {
    name: '近7日',
    id: 1
  },
  {
    name: '近30日',
    id: 2
  }
]
export default {
  components: {
    orderStatusEcharts,
    writeReport,
    monthOrder,
    serviceSort,
    SvgIcon,
    ContainerOutlined
  },
  setup(props) {
    provide('echarts', echarts)

    let ordertime = ref([]) //订单开始和结束时间
    let ranges = reactive({
      //时间选择器
      Today: [moment(), moment()],
      'This Month': [moment(), moment().endOf('month')]
    })
    // const form = reactive({});
    const data = reactive({
      options1,
      form: {
        timeType: 1
      },
      // base data
      datas: {},
      // top10
      adminServiceList: [],
      // 任务待办
      todoList: [],
      // 订单趋势
      orderNumberByDay: [],
      chartData: {}
    })
    // const panelChange = (date, dateString) => {
    //   console.log("选择的时间是", dateString);
    //   // 直接查询相应订单吧
    //   form.startTime = dateString[0];
    //   form.endTime = dateString[1];
    //   init(form);
    // };
    const params = reactive({
      obj: {
        allOrdersMoney: '',
        allOrdersNumber: '',
        checkNursingReportPercentage: '',
        dontAnswerSheetNumber: '',
        dontAnswerSheetPercentage: '',
        haveNursingReportPercentage: '',
        inServiceNumber: '',
        inServicePercentage: '',
        lastYearOrderNumber: [],
        noCheckNursingReportPercentage: '',
        noHaveNursingReportPercentage: '',
        noPayNumber: '',
        okOrderNumber: '',
        okOrderPercentage: '',
        payNumber: '',
        thisYearOrderNumber: []
      },
      numberData: [
        {
          img: userBG,
          title: '用户总量',
          num: 4,
          icon: 'user',
          shadow: 'user-shadow',
          i: c,
          color: '#70DAA4',
          value: 'userCount'
        },
        {
          img: industryBG,
          title: '护士总量',
          num: 4,
          icon: 'industry',
          shadow: 'industry-shadow',
          i: a,
          color: '#FF8B5C',
          value: 'nurseCount'
        },
        {
          img: templateBG,
          title: '交易总额',
          num: 4,
          icon: 'template',
          shadow: 'template-shadow',
          i: b,
          color: '#838EFF',
          value: 'allOrdersMoney'
        },
        {
          img: applyBG,
          title: '订单总量',
          num: 4,
          icon: 'apply',
          shadow: 'apply-shadow',
          i: d,
          color: '#FF7979',
          value: 'allOrdersNumber'
        }

        // {
        //   img: activeBG,
        //   title: "用户活跃指数",
        //   num: 4,
        //   icon: "active",
        //   shadow: "active-shadow",
        //   color: "#FFB64F",
        // },
      ],
      isShow: false,
      cards: [
        {
          name: '已完成',
          icon: require('@/assets/img/index/5.jpg'),
          num: 'okOrderNumber'
        },
        {
          name: '服务中',
          icon: require('@/assets/img/index/4.jpg'),
          num: 'inServiceNumber'
        },
        {
          name: '待服务',
          icon: require('@/assets/img/index/3.jpg'),
          num: 'noServeNumber'
        },
        {
          name: '待抢单',
          icon: require('@/assets/img/index/2.jpg'),
          num: 'noAnswerNumber'
        },
        {
          name: '待付款',
          icon: require('@/assets/img/index/1.jpg'),
          num: 'noPayNumber'
        },
        {
          name: '已退款',
          icon: require('@/assets/img/index/6.jpg'),
          num: 'alreadyRefund'
        }
      ],
      todoStatus: {
        noAnswerNumber: '待接单',
        waitRefund: '待处理退款',
        waitNursingReportCount: '待审核护理报告数量',
        waitAuthenticationNumber: '待审核护士认证',
        waitCheckNumber: '待审核提现',
        waitOpinionNumber: '待处理意见反馈'
      }
    })

    // 间隔
    // setInterval(() => {
    //   init();
    // }, 10000);
    init()
    async function init() {
      let res = await home({
        timeType: data.form.timeType
      })
      if (res.success) {
        data.datas = {
          ...res.object
        }

        // top10
        data.adminServiceList = [...res.object.adminServiceList.slice(0, 10)]
        let { noAnswerNumber, waitRefund, waitNursingReportCount, waitAuthenticationNumber, waitCheckNumber, waitOpinionNumber } =
          res.object
        // 任务待办
        let arr = [
          {
            name: 'noAnswerNumber',
            value: noAnswerNumber
          },
          {
            name: 'waitRefund',
            value: waitRefund
          },
          {
            name: 'waitNursingReportCount',
            value: waitNursingReportCount
          },
          {
            name: 'waitAuthenticationNumber',
            value: waitAuthenticationNumber
          },
          {
            name: 'waitCheckNumber',
            value: waitCheckNumber
          },
          {
            name: 'waitOpinionNumber',
            value: waitOpinionNumber
          }
        ]

        arr = arr.map(a => {
          return {
            name: params.todoStatus[a.name],
            value: a.value
          }
        })
        data.todoList = [...arr]

        // 订单趋势
        data.orderNumberByDay = [...res.object.orderNumberByDay]
        handleChartActive()
      }
    }
    const initEcharts = async () => {
      let res = await home({
        timeType: data.form.timeType
      })
      if (res.success) {
        data.orderNumberByDay = [...res.object.orderNumberByDay]
        handleChartActive()
      }
    }
    const retComputed = {
      options: computed(() => {
        return {
          title: {
            text: '单位：件',
            textStyle: {
              color: '#fff',
              fontSize: 20
            },
            top: 0
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            top: 40,
            left: 54,
            right: 60,
            bottom: 50
          },
          legend: {
            // data: ["7日变化趋势"],
            textStyle: {
              color: '#fff',
              fontSize: 20
            },
            right: 40
          },
          xAxis: {
            show: true,
            type: 'category',
            boundaryGap: false,
            data: data.chartData.xAxis,
            axisTick: {
              show: true,
              alignWithLabel: true
            }
            // axisLabel: {
            //   color: "#fff",
            //   fontSize: 20,
            // },
          },
          yAxis: {
            type: 'value'
            // splitLine: {
            //   show: false,
            // },
            // axisLine: {
            //   show: true,
            // },
            // axisTick: {
            //   show: true,
            // },
            // axisLabel: {
            //   color: "#fff",
            //   fontSize: 20,
            // },
          },
          series: [
            {
              data: data.chartData.yAxis,
              type: 'line',
              // name: "7日变化趋势",
              symbol: 'rect',
              symbolSize: 8,
              smooth: true,
              markLine: {},
              itemStyle: {
                normal: {
                  color: 'rgba(0, 255, 255, 0.5)'
                }
              },
              areaStyle: {
                opacity: 1,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(125, 229, 247, 0.5)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(125, 229, 247, 0)'
                  }
                ])
              }
            }
          ]
        }
      })
    }
    onMounted(() => {})
    const handleChange = () => {
      initEcharts()
    }
    const handleChartActive = () => {
      // data.activeChart = index;
      data.chartData.yAxis = []
      data.chartData.xAxis = []
      data.orderNumberByDay.map(m => {
        data.chartData.xAxis.push(m.date.slice(0, 10))
        data.chartData.yAxis.push(m.count)
      })
    }
    return {
      ...retComputed,
      ...toRefs(params),
      ...toRefs(data),
      applyBG,
      industryBG,
      userBG,
      templateBG,
      activeBG,
      ordertime,
      ranges,
      a,
      b,
      c,
      d,
      handleChange,
      initEcharts,
      handleChartActive
    }
  }
}
</script>
<style scoped lang="less">
.information {
  width: 100%;
  height: 200px;
  // display: flex;
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;

  &-item {
    // flex:1;
    position: relative;
    color: #666;
    margin-right: 20px;
    font-weight: 500;
    font-size: 24px;

    .imgb {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .content {
      width: 100%;
      height: 100%;
      padding: 50px 40px 40px 50px;
      position: absolute;
      z-index: 3;
      display: flex;
      align-content: center;
      justify-content: space-between;

      &-left {
        display: flex;
        flex-flow: column;
        align-content: space-between;

        .num {
          font-size: 44px;
          font-family: DINCond-Black, DINCond;
          font-weight: 900;
        }
      }

      &-right {
        display: flex;
        flex-flow: column;

        img {
          height: 74px;
          width: 74px;
        }

        .shadow {
          width: 64px !important;
          height: 28px !important;
        }
      }
    }
  }
}

.footer {
  margin: 20px;
}

.left_part {
  flex: 4;

  .cl {
    flex: 1;
  }

  .cards {
    margin-left: 10px;
  }

  .ul {
    .li {
      padding: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid #eee;

      .title-icon {
        // width:80%;
        .icon {
          display: inline-flex;
          margin-right: 20px;
          width: 20px;
          height: 20px;
          color: #fff;
          background: #2a9d8f;
          border-radius: 100%;
        }
      }

      .title {
        // width: 70%;
        flex: 1;
      }

      .desc {
        margin-left: 4px;
      }
    }
  }
}

.right_part {
  margin-left: 10px;
  flex: 3;

  .char_wrap {
    height: 500px;
  }
}

.order {
  width: 95%;
  margin: 0 auto;

  img {
    height: 40px;
    width: 40px;
  }

  .right {
    .num {
      font-size: 24px;
    }
  }
}

.information {
}
</style>
